<template>
  <div
    class="form-container confirm-info-container applymentnew-form"
    :class="{ 'is-company': currentCreateType === '企业商户' }"
  >
    <el-form label-width="140px" size="medium" label-position="left" v-if="formData.baseInfo">
      <div class="form-item">
        <div class="form-item-hd">
          联系信息
          <a
            v-if="!$route.query.isPreview"
            href="javascript:;"
            class="edit-btn"
            @click="goStep('填写基本信息')"
          >修改</a>
        </div>
        <div class="form-item-bd">
          <el-form-item label="联系人姓名" class="widthout-tips">{{ formData.baseInfo.name }}</el-form-item>
          <el-form-item label="手机号码" class="widthout-tips">{{ formData.baseInfo.phone }}</el-form-item>
          <el-form-item label="常用邮箱" class="widthout-tips">{{ formData.baseInfo.email }}</el-form-item>
        </div>
      </div>

      <div class="form-item">
        <div class="form-item-hd">
          经营信息
          <a
            v-if="!$route.query.isPreview"
            href="javascript:;"
            class="edit-btn"
            @click="goStep('填写基本信息')"
          >修改</a>
        </div>
        <div class="form-item-bd">
          <el-form-item label="门店名称" class="widthout-tips">{{ formData.baseInfo.storeName }}</el-form-item>
          <el-form-item label="门店地址" class="widthout-tips">{{ formData.baseInfo.storeAddress }}</el-form-item>
          <el-form-item label="门店门口照片" class="widthout-tips">
            <img
              class="preview-img"
              :src="formData.baseInfo.storeEntrancePic"
              alt
              v-if="!formData.baseInfo.storeEntrancePicBase64"
            />
            <img
              class="preview-img"
              :src="'data:image/jpeg;base64,' + formData.baseInfo.storeEntrancePicBase64"
              alt
              v-if="formData.baseInfo.storeEntrancePicBase64"
            />
          </el-form-item>

          <el-form-item label="店内环境照片" class="widthout-tips">
            <img
              class="preview-img"
              :src="formData.baseInfo.storeIndoorPic"
              alt
              v-if="!formData.baseInfo.storeIndoorPicBase64"
            />
            <img
              class="preview-img"
              :src="'data:image/jpeg;base64,' + formData.baseInfo.storeIndoorPicBase64"
              alt
              v-if="formData.baseInfo.storeIndoorPicBase64"
            />
          </el-form-item>

          <el-form-item label="商户简称" class="widthout-tips">{{ formData.baseInfo.merchantShort }}</el-form-item>
          <el-form-item label="客服电话" class="widthout-tips">{{ formData.baseInfo.customTel }}</el-form-item>
          <el-form-item
            label="主体类型"
            class="widthout-tips"
            v-if="currentCreateType === '企业商户'"
          >{{ formData.baseInfo.organizationType | formatOrganizationType }}</el-form-item>
        </div>
      </div>

      <div class="form-item">
        <div class="form-item-hd">
          商户信息
          <a
            v-if="!$route.query.isPreview"
            href="javascript:;"
            class="edit-btn"
            @click="goStep('填写商户信息')"
          >修改</a>
        </div>
        <div class="form-item-bd">
          <div class="company-merchant-item" v-if="currentCreateType === '企业商户'">
            <div class="company-title">营业执照</div>
            <el-form-item label="营业执照照片" class="widthout-tips">
              <img
                class="preview-img"
                :src="formData.merchantInfo.businessLicense"
                alt
                v-if="!formData.merchantInfo.businessLicenBase64"
              />
              <img
                class="preview-img"
                :src="'data:image/jpeg;base64,' + formData.merchantInfo.businessLicenBase64"
                alt
                v-if="formData.merchantInfo.businessLicenBase64"
              />
            </el-form-item>
            <el-form-item
              label="营业执照注册号"
              class="widthout-tips"
            >{{ formData.merchantInfo.businessLicenseCode }}</el-form-item>

            <el-form-item label="证件有效期" class="widthout-tips">
              <template v-if="formData.merchantInfo.businessStartTime">
                {{ formData.merchantInfo.businessStartTime }} 至
                {{ formData.merchantInfo.companyisLongTime ? '长期' : formData.merchantInfo.businessEndTime }}
              </template>
            </el-form-item>
            <el-form-item
              label="经营范围"
              class="widthout-tips"
            >{{ formData.merchantInfo.businessScope }}</el-form-item>
          </div>

          <div class="company-merchant-item" v-if="currentCreateType === '企业商户'">
            <div class="company-title">基本信息</div>

            <el-form-item
              label="企业名称"
              class="widthout-tips"
            >{{ formData.merchantInfo.businessName }}</el-form-item>

            <el-form-item
              label="注册地址"
              class="widthout-tips"
            >{{ formData.merchantInfo.registeredAddress }}</el-form-item>
          </div>

          <div class="company-merchant-item">
            <div class="company-title" v-if="currentCreateType === '企业商户'">企业法人/经办人</div>

            <el-form-item label="身份证正面照片" class="widthout-tips">
              <img
                class="preview-img"
                :src="formData.merchantInfo.idCardFront"
                alt
                v-if="!formData.merchantInfo.idCardFrontBase64"
              />
              <img
                class="preview-img"
                :src="'data:image/jpeg;base64,' + formData.merchantInfo.idCardFrontBase64"
                alt
                v-if="formData.merchantInfo.idCardFrontBase64"
              />
            </el-form-item>

            <el-form-item label="身份证反面照片" class="widthout-tips">
              <img
                class="preview-img"
                :src="formData.merchantInfo.idCardBack"
                alt
                v-if="!formData.merchantInfo.idCardBackBase64"
              />
              <img
                class="preview-img"
                :src="'data:image/jpeg;base64,' + formData.merchantInfo.idCardBackBase64"
                alt
                v-if="formData.merchantInfo.idCardBackBase64"
              />
            </el-form-item>
            <el-form-item
              label="证件号码"
              class="widthout-tips"
            >{{ formData.merchantInfo.idCardNumber }}</el-form-item>
            <el-form-item
              label="证件持有人姓名"
              class="widthout-tips"
            >{{ formData.merchantInfo.certificateHolderName }}</el-form-item>
            <el-form-item label="证件有效期" class="widthout-tips">
              <template v-if="formData.merchantInfo.idCardStartTime">
                {{ formData.merchantInfo.idCardStartTime }} 至
                {{ formData.merchantInfo.isLongTime ? '长期' : formData.merchantInfo.idCardEndTime }}
              </template>
            </el-form-item>
          </div>
        </div>
      </div>

      <div class="form-item">
        <div class="form-item-hd">
          结算账户
          <a
            v-if="!$route.query.isPreview"
            href="javascript:;"
            class="edit-btn"
            @click="goStep('填写结算账户')"
          >修改</a>
        </div>
        <div class="form-item-bd">
          <el-form-item
            label="开户名称"
            class="widthout-tips"
          >{{ formData.bankAccountInfo.bankUserName }}</el-form-item>
          <el-form-item label="开户银行" class="widthout-tips">{{ formData.bankAccountInfo.bankType }}</el-form-item>
          <el-form-item
            label="开户支行"
            class="widthout-tips"
          >{{ formData.bankAccountInfo.bankBranchName }}</el-form-item>
          <el-form-item label="银行账号" class="widthout-tips">{{ formData.bankAccountInfo.bankNumber }}</el-form-item>
        </div>
      </div>
    </el-form>

    <div class="agreen" v-if="!$route.query.isPreview">
      <el-checkbox v-model="isAgreen">
        我已阅读并同意
        <a href="javascript:;" class="protocol-link" @click="$emit('goStep', '车场协议')">车场协议</a>
      </el-checkbox>
    </div>

    <div class="action-box applymentnew" v-if="!$route.query.isPreview">
      <el-button type="primary" size="medium" plain @click="$emit('goBackSetp')">上一步</el-button>
      <el-button type="primary" size="medium" @click="submite">确认提交</el-button>
    </div>
  </div>
</template>

<script>
import common from "@/mixins/common.js";
import { setTimeout } from "timers";
export default {
  name: "confirmInfo",
  mixins: [common],
  props: ["formData", "currentCreateType", "id"],
  data() {
    return {
      isAgreen: false
    };
  },
  methods: {
    goStep(tab) {
      this.$emit("goStep", tab);
    },
    submite() {
      const self = this;
      if (!this.isAgreen) {
        this.showToast("请勾选‘我已阅读并同意车场协议’", 0, 2000);
        return;
      }

      let formData = JSON.parse(JSON.stringify(this.formData));

      formData.baseInfo.storeAddressCode = `${formData.baseInfo.store_province},${formData.baseInfo.store_city}`;
      formData.baseInfo.storeAddressCodeDesc = formData.baseInfo.storeAddressCodeDesc.join(
        ""
      );

      formData.merchantInfo.idCardValidTime = JSON.stringify([
        formData.merchantInfo.idCardStartTime,
        formData.merchantInfo.isLongTime
          ? "长期"
          : formData.merchantInfo.idCardEndTime
      ]);

      if (this.currentCreateType === "企业商户") {
        formData.merchantInfo.businessTime = JSON.stringify([
          formData.merchantInfo.businessStartTime,
          formData.merchantInfo.companyisLongTime
            ? "长期"
            : formData.merchantInfo.businessEndTime
        ]);
      }

      formData.bankAccountInfo.bankCityCode = `${formData.bankAccountInfo.bankProvince},${formData.bankAccountInfo.bank_city}`;

      formData.bankAccountInfo.bankCity = formData.bankAccountInfo.bankCity.join(
        ""
      );

      if (formData.bankAccountInfo.bankType === "其他") {
        formData.bankAccountInfo.bankType =
          formData.bankAccountInfo.otherBankType;
      }

      let params = {
        parkId: this.$route.query.parkId,
        operatorId: sessionStorage.getItem("_operatorID"),
        payPlatform: this.$route.query.payPlatform
      };
      if (this.id) {
        params.id = this.id;
      }
      let ui_key = [
        "store_province",
        "store_city",
        "idCardStartTime",
        "idCardEndTime",
        "isLongTime",
        "bankProvince",
        "bank_city",
        "businessStartTime",
        "businessEndTime",
        "otherBankType"
      ];

      for (let key in formData) {
        for (let inKey in formData[key]) {
          if (!ui_key.includes(inKey)) {
            params[inKey] = formData[key][inKey];
          }
        }
      }

      if (this.currentCreateType === "小微商户") {
        const store_properties = [
          "organizationType",
          "businessLicenBase64",
          "businessCategory",
          "businessLicenseCode",
          "businessTime",
          "businessScope",
          "businessName",
          "registeredAddress",
          "qualificationsBase64",
          "qualifications"
        ];
        for (let key in params) {
          if (store_properties.includes(key)) {
            params[key] = "";
          }
        }
      }
      console.log(params);
      return;
      API.fetchPost("/valueAdded/savePayMerchantInfo", params).then(
        res => {
          if (res.status === 1 && res.resultCode === 0) {
            localStorage.removeItem("wechatPayApplyLocalData");
            this.showToast("操作成功！", 1, 1500);
            setTimeout(() => {
              self.back();
            }, 1500);
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    back() {
      this.$router.push({
        name: "onlinePayment"
      });
    }
  },
  filters: {
    formatOrganizationType(type) {
      const typeOpt = {
        "2": "企业",
        "3": "党政、机关及事业单位",
        "4": "个体工商户",
        "1708": "其他组织"
      };
      return typeOpt[type];
    }
  }
};
</script>

<style lang="less" scoped>
@import "./common.less";
.preview-img {
  width: 230px;
  vertical-align: bottom;
  margin-top: 15px;
}

.company-title {
  font-size: 14px;
  color: #666666;
  padding-left: 12px;
  position: relative;
  margin-bottom: 20px;
  margin-left: -14px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #00ae47;
  }
}

.is-company {
  .company-merchant-item {
    border-bottom: 1px solid #d7dce2;
    padding-bottom: 30px;
    margin-bottom: 30px;
    padding-left: 20px;
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }
}

.agreen {
  font-size: 14px;
  color: #666666;
  margin-top: 30px;
  .protocol-link {
    font-size: 14px;
    color: #5995d8;
    margin-left: 4px;
  }
}
</style>
